<template>
	<view class="content">
		<view class="myVideo">
			<video id="myVideo" src="http://www.yamayi.net/uploads/video/7f620080fe819065b99a9c0e8a1b5539.MOV" @error="videoErrorCallback" controls></video>
		</view>
		<view class="video_info_box">
			<view class="title">YSL口红涂抹由伦敦奢侈品摄影师Josh Caudwell拍摄口红涂抹由伦敦奢侈品摄影师</view>
			<view class="top_click">
				<view class="is_top">推荐</view>
				<view class="click">1.55 万人观看</view>
			</view>
			<view class="seller_info">
				<view class="seller_logo"><img src="/static/baner_logo_2.jpg"></view>
				<view class="seller_name">百达翡丽官方旗舰店</view>
				<navigator class="join_seller" url="/pages/seller/index">进入店铺</navigator>
			</view>
		</view>
		<view class="tj_title"><i class="coolc icon-remen"></i><span>该视频推荐产品</span></view>
		<scroll-view scroll-x class="h-list">
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por5.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por6.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por5.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
			<navigator class="goods_user" url="/pages/goods/product">
				<img src="~@/static/por6.jpg"/>
				<view class="product-title">计时系列 5180/1G-010 机械男表</view>
				<view class="product-price">
					<text class="product-price-original">￥1780.00</text>
				</view>
			</navigator>
		</scroll-view>
		<view class="tj_title"><i class="coolc icon-shipin"></i><span>TA的视频</span></view>
		<view class="videolist">
			<video-List v-for="(item, index) in videoSeller[0].list" :key="index" v-bind:item="item" seller="yes"></video-List>
		</view>
		<view class="tj_title"><i class="coolc icon-shipin"></i><span>相关视频</span></view>
		<view class="videolist">
			<video-List v-for="(item, index) in videoList[0].list" :key="index" v-bind:item="item"></video-List>
		</view>
		
		<!-- 返回顶部 -->
		<view :class="['gotop',scrollTop > 500 ? 'gotops' : '']" @click="onGotoTop"><img src="~@/static/img/icon/gotop.png"></view>
	</view>
</template>

<script>
	import videoList from '@/components/video-list';
	export default {
		components: {
			videoList
		},
		data() {
			return {
				scrollTop:0,
				videoList: [{}, {}],
				videoSeller: [{}, {}],
			}
		},
		onPageScroll(res){
			this.scrollTop = res.scrollTop;
		},
		onLoad(){
			this.loadData();
			setTimeout(()=> {
				this.renderImage = true;
			},300);
			
			uni.setNavigationBarTitle({
				title:"YSL口红涂抹由伦敦奢侈品摄影师Josh Caudwell拍摄"
			});
		},
		methods:{
			onGotoTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			//链接跳转
			navTo(url){
				uni.reLaunch({  
					url
				})  
			},
			async loadData() {

				let videoList = await this.$api.json('videoList');
				this.videoList = videoList;
				
				let videoSeller = await this.$api.json('videoSeller');
				this.videoSeller = videoSeller;
			}
		}
	}
</script>

<style lang="scss">
	page { background:$bgcolor_white; }
	.myVideo {
		width:100%; height:560upx;
		#myVideo { width:100%; height:560upx; }
	}
	
	.video_info_box {
		width:100%; padding:26upx; border-bottom:1px solid #eeeeee; margin-bottom:15upx;
		.title { width:100%; line-height:38upx; height:auto; display:table; font-size:$font-base + 4upx; color:#000000; padding-bottom:20upx; }
		
		.top_click {
			width:100%; height:60upx;
			
			.is_top { height:40upx; line-height:40upx; background:$vui_bgcolor; color:$bgcolor_white; font-size:$font-sm; padding:0upx 10upx; border-radius:5upx; display:block; float:left; }
			.click { height:40upx; line-height:40upx; padding-left:15upx; display:block; float:left; color:$font-color-666; font-size:$font-base; }
		}
		
		.seller_info {
			width:100%; height:90upx;
			
			.seller_logo {
				width:90upx; height:90upx; border-radius:90upx; overflow:hidden; text-align:center; display:flex; justify-content:center; float:left; border:1px solid #eeeeee;
				img { width:auto; height:90upx; }
			}
			.seller_name { height:90upx; line-height:90upx; color:$font-color-666; display:block; float:left; padding-left:20upx; font-size:$font-base; }
			.join_seller { height:60upx; line-height:60upx; border-radius:6upx; margin:15upx 0; padding:0 20upx; background:#ef0043; font-size:$font-base; color:$bgcolor_white; display:block; float:right; }
		}
	}
	
	.tj_title { width:100%; height:60upx; padding:10upx 26upx 0 26upx; clear:both;
		.coolc { display:block; float:left; font-size:$font-lg + 4upx; color:#ef0043; padding-right:10upx; }
		span { display:block; float:left; font-size:$font-base + 4upx; color:$font-color-333; }
	}
	.videolist { width:100%; height:auto; display:table; text-align:left; padding:0 20upx 20upx 20upx; }
	.h-list{
		white-space:nowrap; padding:0upx 0 20upx 26upx;
		
		.goods_user{ display:inline-block; width:260upx; height:auto; border:1px solid #eee; overflow:hidden; margin-right:20upx;  padding-bottom:18upx; background:#ffffff; }
		.goods_user img { width:260upx; height:260upx; }
		.goods_user .product-title { width:220upx; color:#666666; display:block; margin:0 auto; font-size:24upx; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
		.goods_user .product-price { margin-top:0px; padding:0 20upx; color:$vui_bgcolor; }
	}
</style>
